<template>
	<div class="purse">
		<div class="topBar">
			<div class="title">
				<div class="box" style="font-size:15px">杭州</div>
				<div class="box" style="font-size:18px">钱 包</div>
				<div class="box">
					<i class="iconfont icon-jiahao"></i>
				</div>
			</div>
			<img src="../../assets/img/ps_1.png" alt="">
			<div class="num">2000000.00<span> 章鱼丸</span> </div>
		</div>	
    <div class="listBox">
      <div class="title"></div>
      <ul>
        <li>
          <img src="../../assets/img/PS.png" alt="">
          <span class="name">PS</span>
          <div class="liRight">
            <span>132.0000000</span> <br>
            <span>=32.0000000章鱼丸</span>
          </div>
        </li>
        <li>1</li>
        <li>1</li>
      </ul>
    </div>
		<footer-bar class="footer" />
	</div>
</template>
<script>
import HeaderBar from "@/components/headerBar";
import FooterBar from "@/components/footerBar";
export default {
  name: "Home",
  data() {
    return {
      arr: [
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        },
        {
          img: require("../../assets/img/PS.png"),
          name: "PS",
          t: "2333331",
          b: "32.0000000章鱼丸"
        }
      ]
    };
  },
  mounted() {},
  components: {
    FooterBar,
    HeaderBar
  },
  methods: {
    loadMore() {}
  }
};
</script>
<style lang="stylus" scoped>
.footer {
  position: fixed;
  bottom: -0.04rem;
  background: #fff;
  z-index: 111;
}

.purse {
  font-family: 'PingFang-SC-Medium';
  height: 100%;
  background: #E8E8E8;

  .topBar {
    height: 2.45rem;
    background: linear-gradient(90deg, rgba(0, 174, 255, 1), rgba(0, 180, 255, 1), rgba(0, 120, 255, 1));
    padding: 36px 0 0 0;
    box-sizing: border-box;

    .title {
      display: flex;
      justify-content: space-between;
      margin: 0 15px 35px 15px;
      color: #FFFFFF;
    }

    img {
      width: 53px;
      height: 53px;
      margin: 0 auto;
      display: block;
    }

    .num {
      font-size: 33px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-top: 22px;
      text-align: center;

      span {
        font-size: 16px;
        position: relative;
        bottom: 10px;
      }
    }
  }

  .listBox {
    width: 3.55rem;
    height: 2rem;
    border-radius: 0.1rem;
    margin: -30px auto 0 auto;
    background: #fff;

    .title {
      width: 152px;
      height: 32px;
      margin: 0 auto;
      background: url('./img/Assets_title.png');
      background-size: 100% 100%;
    }

    ul {
      li {
        border-bottom: 1px solid #E6E6E6;
        background: pink;

        img {
          width: 45px;
          height: 45px;
          margin: 12px;
        }

        .name {
          font-size: 16px;
        }

        .liRight {
          height: 45px;
          display: inline-block;
          text-align: right;
          background: red;
        }
      }
    }
  }
}
</style>
